﻿module Sustainalytics.Screening {

    export interface JQuery {
        slider(value: any): any;
        slider(option: string, property: string, newValue: any): any;
    }


    var mod = angular.module(screeningToolModuleName);

    mod.directive('slider', () => {

        return {
            restrict: 'A',
            scope: {
                value: '='
            },
            link: (scope: any, elem, attrs, ctrl) => {
                var slide = elem.slider({
                    range: "min",
                    value: 0,
                    min: 0,
                    max: 5,
                    slide: (event, ui) => {
                        scope.$apply(() => {
                            scope.value = ui.value;
                        });
                    },
                    change: (event, ui) => {
                        if (scope.value != ui.value) {
                            scope.$apply(() => {
                                scope.value = ui.value;
                            });
                        }
                    }
                });

                scope.$watch(function () { return scope.value; }, function (newValue) {
                    if (newValue == undefined || isNaN(newValue)) return;

                    $(elem)['slider']("option", "value", newValue);
                });

                var values = ["Off", "Severe", "High", "Significant", "Moderate", "Low"];
                slide.slider("pips", { rest: "label", labels: values });
            }
        }
    });
}